<template>
  <div class="comBody">
    <div class="title" ref="cmtInput">
      <h4>评论</h4>
      <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        :closable="true"
        type="primary"
        @close="handleClose(tag)"
        v-show="showtag==true"
      >回复 @{{tag.nickname}}</el-tag>
    </div>
    <div class="textinput">
      <el-input type="textarea" :rows="2" resize="none" placeholder="说点什么吧..." v-model="textarea"></el-input>
    </div>
    <el-row type="flex" justify="space-between" align="top">
      <!-- 图片上传 -->
      <el-upload
        :action="$axios.defaults.baseURL+'/upload'"
        list-type="picture-card"
        :file-list="pics"
        name="files"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
      <!-- 按钮 -->
      <div class="btn">
        <el-button type="primary" size="mini" @click="onSubmit">提交</el-button>
      </div>
    </el-row>
    <!-- 评论内容部分 -->
    <div class="Commentlist" v-if="cmtData.length>0">
      <div class="comment-item" v-for="(comment,index) in cmtData" :key="index">
        <div class="cmt-info">
          <div class="userinfo">
            <img
              v-if="comment.defaultAvatar"
              :src="$axios.defaults.baseURL+comment.defaultAvatar"
              alt
            />
            <img v-else src="@/assets/test.jpg" alt />
            <span class="nickname">{{comment.account.nickname}}</span>
            <span class="time">{{$moment(comment.account.created_at).format("YYYY-MM-DD hh:mm")}}</span>
          </div>
          <div class="cmt-acount">{{comment.level}}</div>
        </div>
        <!-- 这里是parent组件渲染的地方 -->
        <div class="cmt-msg">
          <Parent v-if="comment.parent" :parent="comment.parent" @BtnReply="SendFollowId"></Parent>
          <div>
            <p class="msg">{{comment.content}}</p>
            <div class="cmt-img" v-for="(imgItem,index) in comment.pics" :key="index">
              <img v-if="imgItem.url" :src="$axios.defaults.baseURL+imgItem.url" alt />
            </div>
            <p class="reply">
              <a
                href="javascript:;"
                class="linkbtn"
                @click="SendFollowId(comment.id,comment.account.nickname)"
              >回复</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Parent from "@/components/post/Comments/Parent.vue";
export default {
  props: ["cmtData"],
  components: {
    Parent
  },
  data() {
    return {
      textarea: "",
      dialogImageUrl: "",
      dynamicTags: [{ nickname: "" }],
      pics: [],
      dialogVisible: false,
      isshow: false,
      followid: "",
      nickname: "管理员",
      showtag: false
    };
  },
  mounted() {},
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      console.log("删除图片成功", fileList);
      // 将当前图片列表赋值给pics数组
      this.pics = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      console.log("添加图片成功");
      console.log(response);
      console.log("文件file", file);
      file.id = response[0].id;
      file.url = this.$axios.defaults.baseURL + response[0].url;
      // 将file对象加进pics数组中
      this.pics.push(file);
      // console.log("pics数组", this.pics);
    },
    onSubmit() {
      const formdata = new FormData();
      formdata.append("files", this.pics);
      if (!this.textarea) {
        return this.$message({
          type: "warning",
          message: "内容不能为空"
        });
      } else {
        // 发送请求
        this.$axios({
          url: "/comments",
          method: "post",
          headers: {
            Authorization: "Bearer " + this.$store.state.user.userInfo.token,
            "Content-Type": "application/json"
          },
          data: {
            content: this.textarea,
            pics: this.pics,
            post: this.$route.query.id,
            follow: this.followid
          }
        }).then(res => {
          console.log("发布成功", res);
          const { message } = res.data;
          if (message == "提交成功") {
            this.$message({
              message,
              type: "success"
            });
            // 清掉textarea的内容和图片上传组件的内容
            this.textarea = "";
            this.pics = [];
            // 发送一个点击事件
            this.$emit("RefreshCmt");
          } else {
            this.$message({
              message: "提交失败，请重新提交",
              type: "error"
            });
          }
        });
      }
    },
    SendFollowId(followId, nickname) {
      this.followid = followId;
      this.dynamicTags[0].nickname = nickname;
      window.scrollTo(0, this.$refs.cmtInput.offsetTop);
      // 显示tag
      this.showtag = true;
    },
    // 关闭el-tag
    handleClose(tag) {
      // 删除tag
      this.dynamicTags[0].nickname = "";
      // 隐藏tag
      this.showtag = false;
    }
  }
};
</script>
<style lang="less" scoped>
.comBody {
  .title {
    h4 {
      font-weight: normal;
      font-size: 18px;
      margin-bottom: 20px;
    }
    .el-tag {
      margin-bottom: 10px;
    }
  }
  .textinput {
    margin-bottom: 10px;
    .el-input {
      padding: 5px 15px;
      box-sizing: border-box;
    }
  }
  .el-row {
    margin-bottom: 30px;
    /deep/ .el-upload {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }
    /deep/ .el-upload-list__item {
      width: 100px;
      height: 100px;
      margin: 0 10px;
      /deep/ img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .Commentlist {
    border: 1px solid #ddd;
    height: fit-content;
    .comment-item {
      padding: 20px 20px 5px;
      border-bottom: 1px dashed #ddd;
      .cmt-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #999;
        margin-bottom: 10px;
        .userinfo {
          img {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            vertical-align: top;
          }
          .nickname {
            color: #666;
            margin-left: 5px;
          }
        }
      }
      .cmt-msg {
        padding-left: 30px;
        .reply {
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          text-align: right;
          color: #1e50a2;
          //   display: none;
          .linkbtn {
            cursor: pointer;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        .cmt-img {
          width: 80px;
          height: 80px;
          border-radius: 6px;
          overflow: hidden;
          margin-right: 5px;
          margin-top: 10px;
          padding: 5px;
          border: 1px dashed #ddd;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>